<!-- src/views/home/IndexView.vue -->
<template>
    <header>
        <div class="center">
            <section>
                <h1>
                    <img src="../../assets/logo.png" alt="">
                </h1>

            </section>
            <div class="input" @click="$router.push({path:'search'})">
                <span class="iconfont icon-sousuo"></span>
                <p>请输入商家</p>
            </div>
        </div>
    </header>

    <div class="content">
        <BannerComponent :list="bannerList"></BannerComponent>
        <h2>猜你喜欢</h2>
        <ul class="select">
            <li v-for="(item,index) in select" :key="index" @click="mySort(index)"
                :class="activeIndex==index?'active':'' ">{{item}}</li>
            <li>筛选<span class="iconfont icon-shaixuan"></span> </li>
        </ul>
        <ul class="tag">
            <li>年货节热门</li>
            <li>津贴联盟</li>
            <li>满减优惠</li>
            <li>品质联盟</li>
        </ul>
        <div class="goodslist" v-if="goods.length>0">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <section v-for="(item,index) in goods" :key="index"
                    @click="$router.push({path:'/shop', query:{id:item.mtWmPoiId} })">
                    <div class="imgbox">
                        <img :src="item.picUrl" alt="">
                    </div>
                    <div class="content">
                        <h3>{{item.name}}</h3>
                        <div class="sale">
                            <span>⭐{{item.PoiScore}}</span>
                            <span>{{item.monthSalesTip}}</span>
                        </div>
                        <h5>
                            <div class="h5_left">
                                起送￥{{item.minSend}}&nbsp;远距离配送￥3 <span>￥6</span>
                            </div>
                            <div class="h5_right">
                                {{item.delivertTimeTip}}&nbsp;{{item.distance}}
                            </div>
                        </h5>
                        <ul class="favorable">
                            <li v-for="(obj,index) in item.discounts2" :key="index">{{obj.info}}</li>
                        </ul>
                    </div>

                </section>

            </van-list>
            <div class="backTop" @click="backTop" v-if="scrollTop > 300">
            </div>
        </div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent } from 'vue'
import BannerComponent from './components/BannerComponent.vue';
import { getBannerListData, getShopListData } from '@/api/home';
import type { IBannerItem } from './components/BannerComponent.vue'
export default defineComponent({
    components: {
        BannerComponent
    },
    data(): any {
        return {
            bannerList: [],
            select: ["综合排序", '距离最近', '销量最高'],
            activeIndex: 0,
            goods: [],


        }
    },
    mounted() {
        getBannerListData().then(res => {
            console.log(res)
            this.bannerList = res.data.list
        }),
            getShopListData().then(res => {
                console.log(res)
                this.goods = res.data.list
            })
    },
    methods: {
        mySort(index: number) {
            this.activeIndex = index;
            if (index == 0) {
            } else if (index == 1) {
                this.goods.sort((a: { distance: string; }, b: { distance: string; }) => {
                    return parseInt(a.distance) - parseInt(b.distance);
                });
            } else if (index == 2) {
                this.goods.sort((a: { monthSalesTip: { slice: (arg0: number) => number; }; }, b: { monthSalesTip: { slice: (arg0: number) => number; }; }) => {
                    return b.monthSalesTip.slice(2) - a.monthSalesTip.slice(2);
                });
            } else if (index == 3) {
            }
        },
        onLoad() {
            this.loading = true;
            getShopListData({ page: this.page + 1 }).then((res) => {
                console.log(res);
                if (res.data.list.length != 0) {
                    this.goods = [...this.goods, ...res.data.list];
                    this.page = this.page + 1;
                    this.loading = false;
                } else {
                    this.finish = true
                }
            });
        },
    },
})
</script>
  
<style lang="scss">
header {
    padding: 0 10px;
    height: 0.85rem;
    background-color: rgb(0, 127, 205);

    .center {
        section {
            width: 100%;
            height: 0.43rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
        }
    }

}


header .center>section h1 {
    width: .6rem;
     img {
        width: 100%;
    }
    
}


header .center .input {
    height: .34rem;
    background-color: #fff;
    border-radius: .17rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(126, 133, 138);

    .icon-sousuo {
        font-size: 20px;
    }

    p {
        font-size: 0.16rem;
    }
}

header .icon-fangdajing1 {
    margin-right: .05rem;
    color: rgb(196, 202, 206);
}

.content {
    h2 {
        font-size: 0.16rem;

        font-weight: normal;
        margin: 10px 0;
        margin-left: 10px;
    }

    .select {
        display: flex;
        font-size: .13rem;
        justify-content: space-between;
        padding: 0.1rem .1rem;
    }

    .goodslist {
        margin-top: .18rem;
    }

    section {
        padding: 0.1rem .05rem;
        margin-bottom: .1rem;
        display: flex;

        .imgbox {
            width: 1.0rem;
            height: 1.0rem;

            img {
                width: 100%;
            }
        }

        .content {
            flex: 1;

            font-size: .12rem;

            padding-left: .05rem;

            h3 {
                font-weight: 700;
                margin-bottom: .16rem;
            }

            .sale span:first-child {
                color: rgb(255, 101, 0);
            }

            .sale span:last-child {
                color: rgb(141, 141, 141);
            }

            .h5_right {
                color: rgb(141, 141, 141);
            }

            h5 {
                font-size: .12rem;
                color: rgb(141, 141, 141);
                display: flex;
                justify-content: space-between;

                span {
                    display: inline-block;
                    transform: scale(0.9);
                    color: rgb(188, 188, 188);
                    text-decoration: line-through;
                }
            }

            ul {
                display: flex;
                transform-origin: left;
                transform: scale(0.85);
                flex-wrap: wrap;

            }

            .favorable li {
                border: .01rem solid rgb(255, 206, 199);
                height: .15rem;
                color: rgb(255, 140, 124);
                padding: 0 .05rem;
                margin-right: 0.05rem;
                margin: .05rem;
            }
        }
    }

    .active {
        color: red;
        font-weight: 700;
    }

    .tag {
        display: flex;
        justify-content: space-between;
        height: .3rem;

        margin-top: .2rem;

        li {
            padding: 0 .14rem;
            background-color: rgb(243, 243, 243);
            font-size: .12rem;
            line-height: .3rem;
            border-radius: 5px;
        }

    }
}
</style>